<!DOCTYPE html>
<html lang="en-gb" dir="ltr">

    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Alert component - UIkit tests</title>
        <script src="../../vendor/jquery.js"></script>
        <script src="_test.js"></script>
    </head>

    <body>

        <div class="uk-container uk-container-center">

            <h1>Alert</h1>

            <div class="uk-alert" data-uk-alert>
                <a href="#" class="uk-alert-close uk-close"></a>
                <p>This is an alert using an a element as close button.</p>
            </div>

            <div class="uk-alert uk-alert-success" data-uk-alert>
                <a href="#" class="uk-alert-close uk-close"></a>
                <p>This is a success alert using an a element as close button.</p>
            </div>

            <div class="uk-alert uk-alert-warning" data-uk-alert>
                <a href="#" class="uk-alert-close uk-close"></a>
                <p>This is a warning alert using an a element as close button.</p>
            </div>

            <div class="uk-alert uk-alert-danger" data-uk-alert>
                <a href="#" class="uk-alert-close uk-close"></a>
                <p>This is a danger alert using an a element as close button.</p>
            </div>

            <h2>Alert large</h2>

            <div class="uk-alert uk-alert-large" data-uk-alert>
                <button type="button" class="uk-alert-close uk-close"></button>
                <h2>Today's headline</h2>
                <p>This is an alert using an button element as close button. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut.</p>
            </div>

            <div class="uk-alert uk-alert-large uk-alert-success" data-uk-alert>
                <button type="button" class="uk-alert-close uk-close"></button>
                <h2>Today's headline</h2>
                <p>This is a success alert using an button element as close button. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut.</p>
            </div>

            <div class="uk-alert uk-alert-large uk-alert-warning" data-uk-alert>
                <button type="button" class="uk-alert-close uk-close"></button>
                <h2>Today's headline</h2>
                <p>This is a warning alert using an button element as close button. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut.</p>
            </div>

            <div class="uk-alert uk-alert-large uk-alert-danger" data-uk-alert>
                <button type="button" class="uk-alert-close uk-close"></button>
                <h2>Today's headline</h2>
                <p>This is a danger alert using an button element as close button. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut.</p>
            </div>

        </div>

    </body>
</html>